<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleClose" title="提示" width="60%">
      <el-form ref="globalForm" :model="globalForm" label-width="100">
        <el-form-item label="状态：">
          <el-switch v-model="globalForm.status"/>
        </el-form-item>
        <div class="statu-info">用户拉新活动，是一款可以帮助代理商推广用户注册从而获得用户分成的营销活动</div>
        <div class="awardSet-title">代理商奖励设置</div>
        <el-form-item label="用户注册成功奖励：" label-width="180px">
          <el-switch v-model="globalForm.registerAward"/>
          <div v-if="globalForm.registerAward === true" class="awardSet-radio">
            <el-radio-group v-model="globalForm.awardCondition">
              <el-radio :label="1">
                用户注册成功即奖励代理商
                <el-input v-model="globalForm.awardValueOne" size="small" style="width:100px"/>元
              </el-radio>
              <el-radio :label="2">
                用户注册成功，且首次消费即奖励代理商
                <el-input v-model="globalForm.awardValueTwo" size="small" style="width:100px"/>元
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="用户消费后奖励分成" label-width="180px">
          <el-switch v-model="globalForm.consumeDivide"/>
          <div v-if="globalForm.consumeDivide === true" class="divide-checked">
            <el-checkbox v-model="globalForm.buyCourse">购买课程</el-checkbox>
            <div v-if="globalForm.buyCourse">
              <div>
                <span style="margin:0 20px;">分成比：</span>
                <span>
                  被邀请用户产生的每笔消费，代理商可获订单价格的
                  <el-input v-model="globalForm.courseRate" size="small" style="width:100px"/>%分成。
                </span>
              </div>
              <div>
                <span style="margin:0 20px;">有效期：</span>
                <span>
                  <el-radio-group v-model="globalForm.courseExpiryDate">
                    <el-radio :label="1">长期有效</el-radio>
                    <el-radio :label="2">自定义有效期</el-radio>
                  </el-radio-group>
                </span>
                <div v-if="globalForm.courseExpiryDate === 2" style="margin-left:100px;">
                  <el-date-picker
                    v-model="globalForm.courseCycle"
                    type="datetimerange"
                    align="left"
                    unlink-panels
                    range-separator="|"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width:300px"
                  />
                </div>
              </div>
            </div>
            <el-checkbox v-model="globalForm.buyClass">购买班级</el-checkbox>
            <div v-if="globalForm.buyClass">
              <div>
                <span style="margin:0 20px;">分成比：</span>
                <span>
                  被邀请用户产生的每笔消费，代理商可获订单价格的
                  <el-input v-model="globalForm.classRate" size="small" style="width:100px"/>%分成。
                </span>
              </div>
              <div>
                <span style="margin:0 20px;">有效期：</span>
                <span>
                  <el-radio-group v-model="globalForm.classExpiryDate">
                    <el-radio :label="1">长期有效</el-radio>
                    <el-radio :label="2">自定义有效期</el-radio>
                  </el-radio-group>
                </span>
                <div v-if="globalForm.classExpiryDate === 2" style="margin-left:100px;">
                  <el-date-picker
                    v-model="globalForm.classCycle"
                    type="datetimerange"
                    align="left"
                    unlink-panels
                    range-separator="|"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width:300px"
                  />
                </div>
              </div>
            </div>
            <el-checkbox v-model="globalForm.buyMember">购买会员</el-checkbox>
            <div v-if="globalForm.buyMember">
              <div>
                <span style="margin:0 20px;">分成比：</span>
                <span>
                  被邀请用户产生的每笔消费，代理商可获订单价格的
                  <el-input v-model="globalForm.memberRate" size="small" style="width:100px"/>%分成。
                </span>
              </div>
              <div>
                <span style="margin:0 20px;">有效期：</span>
                <span>
                  <el-radio-group v-model="globalForm.memberExpiryDate">
                    <el-radio :label="1">长期有效</el-radio>
                    <el-radio :label="2">自定义有效期</el-radio>
                  </el-radio-group>
                </span>
                <div v-if="globalForm.memberExpiryDate === 2" style="margin-left:100px;">
                  <el-date-picker
                    v-model="globalForm.memberCycle"
                    type="datetimerange"
                    align="left"
                    unlink-panels
                    range-separator="|"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width:300px"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <div class="awardSet-title">被邀请用户奖励设置</div>
        <el-form-item label="状态：" label-width="180px">
          <el-switch v-model="globalForm.inviteeStatus"/>
        </el-form-item>
        <el-form-item v-if="globalForm.inviteeStatus === true" label="注册成功奖励：" label-width="180px">
          <div>
            用户注册成功即送
            <el-input v-model="globalForm.inviteeMoney" size="small" style="width:100px"/>元低价优惠券(可用于全站消费)
          </div>
          <div style="margin-top:10px">
            优惠券使用有效期
            <el-input v-model="globalForm.inviteeDay" size="small" style="width:100px"/>天
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTenantId, getUserName } from '@/utils/auth'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    dialog() {
      return this.data.dialog
    },
    globalForm() {
      return this.data.globalForm
    }
  },
  methods: {
    handleClose() {
      this.$emit('changeVisiable')
    },
    // 完成按钮事件
    confirmBtn() {
      this.$refs.globalForm.validate((valid) => {
        if (valid) {
          if (!this.globalForm.id) {
            this.globalForm.creator = getUserName()
            this.globalForm.tenantId = getTenantId()
          }
          if (this.globalForm.courseExpiryDate === true) {
            this.globalForm.courseStartTime = this.globalForm.courseCycle[0]
            this.globalForm.courseEndTime = this.globalForm.courseCycle[1]
          }
          if (this.globalForm.classExpiryDate === true) {
            this.globalForm.classStartTime = this.globalForm.classCycle[0]
            this.globalForm.classEndTime = this.globalForm.classCycle[1]
          }
          if (this.globalForm.memberExpiryDate === true) {
            this.globalForm.memberStartTime = this.globalForm.memberCycle[0]
            this.globalForm.memberEndTime = this.globalForm.memberCycle[1]
          }
          this.$emit('changeVisiable', this.globalForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
div {
  color: #606266;
}
.el-form-item {
  margin-bottom: 0px;
}
.statu-info {
  background-color: #eaeaea;
  color: #8e8e8e;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
}
.awardSet-title {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  color: #636363;
}
.awardSet-radio {
  margin-top: 10px;
  .el-radio {
    margin: 10px 0;
    display: block;
  }
}
.divide-checked {
  margin-top: 10px;
  .el-checkbox {
    margin: 10px 0;
    display: block;
  }
}
</style>

